<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<link href="/static/webAPP/css/reset.css" rel="stylesheet" type="text/css">
<link href="/static/webAPP/css/shoping-cart.css" rel="stylesheet" type="text/css">
<script src="/static/webAPP/js/base.js"></script>
<title>购物车</title>
<style>
	.guige input{
   display: none;
}
.guige{
    cursor: pointer;
    position: relative;
}
/* 选中 */
.guige input:checked + ::after{
    display: inline-block;
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    left: 0%;
    bottom: 30%;
	background: url(/static/webAPP/images/check4.png) no-repeat;
	background-size: 100%;
}
.cart-title-address{
	background: url(/static/webAPP/images/scan.png) no-repeat 97% center #fff;
	background-size: 6%;
	color: #379EDE;
	height: 60px;
	line-height: 60px;
}
.cart-title-remarks{
	background: url(/static/webAPP/images/remarks.png) no-repeat 97% center #fff;
	background-size: 6%;
}
.cart-title-iphone i{
	margin-right: 5px;
}
.phone-xg{
	color: #ccc !important;
	font-size: smaller;
}
</style>
</head>
<body style="background: #F5F5F4;">
<div class="near-box">
	<div class="header">
		购物车
		<span class="shop-cart-htext1">编辑</span>
	</div>
	<div class="shop-cart-bigbox">
		<a href="/static/webAPP/machineplace.html"><div class="cart-title cart-title-address">取货点位<i class="placeinfo" style="width: 70%;text-align: right;">合肥富禾</i></div></a>
		<div class="cart-title cart-title-iphone">收货手机号<i class="phone-xg">修改</i><i class="phone"></i></div>
        <div class="cart-title cart-title-remarks">备注消息<i><input type="text" name="" id="comment_txt" placeholder="输入备注"></i></div>
		<div class="shop-cart-listbox1">
			<!-- <div class="shop-cart-box2">
				<input  type="checkbox" name="sub2" class="btn1">
				<span class="shop-cart-ltext1">自营商品</span>
			</div> -->
			<div id="cartgoods_info">
				
				
				
			</div>
		     <div class="shopPrice">商品金额：￥<span class="ShopTotal">0.00</span></div>
		</div>
        


	</div>
	<div class="shop-cart-total">
		<label class="checkall">
			<span class="shop-cart-check1"><input type="checkbox" class="" id="ckAll"></span>
			全选
		</label>
		<span class="scart-total-text2">合计：￥</span>
		<span id="AllTotal" class="scart-total-text3">0.00</span>
		<!-- <span id="costTotal" style="color: #ccc;text-decoration:line-through;"></span> -->
		<span class="scart-total-text4" id="submit-orders">去结算<i id="selectedTotal"></i></span>
		<span class="delete hide"></span>
	</div>
	<div class="kaola-bottom">
		<a href="/static/webAPP/index.html" class="kaola-bottom-box1">
			<span class="kaola-bottom-img1"><img src="/static/webAPP/images/home2.png"></span>
			<span class="kaola-bottom-text1">首页</span>
		</a>
		<a href="/static/webAPP/classify.html" class="kaola-bottom-box1">
			<span class="kaola-bottom-img1"><img src="/static/webAPP/images/fenlei1.png"></span>
			<span class="kaola-bottom-text1">分类</span>
		</a>
		<a href="/static/webAPP/shoping-cart.html" class="kaola-bottom-box1">
			<span class="kaola-bottom-img1"><img src="/static/webAPP/images/shop-cart2.png"></span>
			<span class="kaola-bottom-text1 text2">购物车</span>
		</a>
		<a href="/static/webAPP/personal-center.html" class="kaola-bottom-box1">
			<span class="kaola-bottom-img1"><img src="/static/webAPP/images/people1.png"></span>
			<span class="kaola-bottom-text1">我的</span>
		</a>
	</div>
</div>
<input type="hidden" id="ids" value="">
<script src="/static/webAPP/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/static/webAPP/lib/mobile/layer.js"></script>
<script src="/static/webAPP/js/cart.js" type="text/javascript"></script>
<script type="text/javascript">


$(function(){
	//添加的监听事件,判断进入页面是否刷新
	window.addEventListener("pageshow", function(){
		if(sessionStorage.getItem("need-refresh")){
			location.reload();
			sessionStorage.removeItem("need-refresh");
		}
	});

	var areaId = sessionStorage.getItem("citycode")
	var machineplace = sessionStorage.getItem("machineplace")
	var sessionAddress = sessionStorage.getItem("sessionAddress")
	var machine_id = sessionStorage.getItem("machineplaceId")
	if (machine_id == 1) {
		$(".placeinfo").html(sessionAddress + '<span style="font-size:12px;color:red">送货上门</span>')
	} else {
		$(".placeinfo").html(machineplace)
	}
	//判断是否登录
	var userName = sessionStorage.getItem("sessionName")
	if (userName == null || userName == '' || userName == undefined) {
		$("#cartgoods_info").html('<div class="index-goods"><span class="index-goods-img"></span><div class="index-goods-textbox"><span class="index-goods-text1"></span><div class="index-goods-text2">未登录</div></div></div>')
	}else{
		$.ajax({
			type: "get",
					//TODO:
			url: "/app/userInfo/" + userName,
			data: '',
			async:false,
			dataType: "json",
			success: function(mag){
				
				sessionStorage.setItem("sessionUserid", mag.data.id)
				if (mag.data.phone == null ||mag.data.phone == '' ||mag.data.phone == undefined) {
					$(".phone").html('未填写收货手机号')
				} else {
					$(".phone").html(mag.data.phone)
				}
				$.ajax({
					type: "get",
							//TODO:
					url: "/app/basket/queryCommodityFromBasket/" + mag.data.id,
					success: function(res){
						var tag = ''
						if (res.data == '' || res.data == undefined || res.data == null) {
							$("#cartgoods_info").html('<div class="index-goods"><span class="index-goods-img"></span><div class="index-goods-textbox"><span class="index-goods-text1"></span><div class="index-goods-text2">未加入商品</div></div></div>')
						}else{
							for (let i = 0; i < res.data.length; i++) {
								var goodscity = res.data[i].commodity.area_id
								if (goodscity == areaId) {
									var tag2 = '<div class="index-goods" cid="'+ res.data[i].commodity.id +'" basket="'+ res.data[i].basket_detail_id +'"><span class="shop-cart-check2"><input type="checkbox" name="sub2" class="shopcart-input1 btn2"></span><span class="index-goods-img"><img src="https://vm.fowotek.com'+ getSmallUrl(res.data[i].picture_url) +'"></span><div class="index-goods-textbox"><span class="index-goods-text1">'+ res.data[i].commodity.commodityName +'</span><div class="index-goods-text2">￥<i class="priceJs">'+ res.data[i].specification.price +'</i></div>    <a href="javascript:void(0);" class="index-goods-text3">'+ res.data[i].specification.specifications +'</a>     <div class="shop-cart-box3"><a href="javascript:void(0);" class="shop-cart-subtract"></a><input type="tel" size="4" value="1" id="tb_count" class="shop-cart-numer"><a href="javascript:void(0);" class="shop-cart-add"></a></div></div></div>'
									tag += tag2
								}else{
									var tag2 = '<div class="index-goods" cid="'+ res.data[i].commodity.id +'" basket="'+ res.data[i].basket_detail_id +'"><span class="shop-cart-check2"><input type="checkbox" name="sub2" class="shopcart-input1 btn2"></span><span class="index-goods-img"><img src="https://vm.fowotek.com'+ getSmallUrl(res.data[i].picture_url) +'"></span><div class="index-goods-textbox"><span class="index-goods-text1">'+ res.data[i].commodity.commodityName +'</span><div class="index-goods-text2">￥<i class="priceJs">'+ res.data[i].specification.price +'</i></div>    <a href="javascript:void(0);" class="index-goods-text3">'+ res.data[i].specification.specifications +'</a>     <div class="shop-cart-box3"><a href="javascript:void(0);" class="shop-cart-subtract"></a><input type="tel" size="4" value="1" id="tb_count" class="shop-cart-numer"><a href="javascript:void(0);" class="shop-cart-add"></a><i style="color:red;font-size:13px;">*商品不在定位区域*</i></div></div></div>'
									tag += tag2
								}
							}
							$("#cartgoods_info").html(tag)
						}
					}
				})
			},
			error: function(){
				layer.open({
					content: '账号查询异常',
					skin: 'msg',
					time: 2 //2秒后自动关闭
				});
			}
		})
		
	}


	$(".cart-title-iphone").on("click",function(){
		$.ajax({
			type: "get",
					//TODO:
			url: "/app/userInfo/" + userName,
			data: '',
			async:false,
			dataType: "json",
			success: function(mag){
				layer.open({
					id:1,
					title:'修改手机号',
					skin:'layui-layer-rim',
					content: ' <div class="row">'
						+'<div class="col-sm-12">'
						+'<div class="input-group">'
						+'<input id="phone-txt" type="text" class="phone-txt" style="height:40px;border-bottom: 1px dashed;" placeholder="请输入更换的手机号">'
						+'</div>'
						+'</div>'
						+'</div>'
					,
					btn:['修改','取消'],
					yes: function (index,layero) {
						var phone = $("#phone-txt").val()
						if ((/^1\d{10}$/.test(phone))) {
							$.ajax({
								type: "post",
										//TODO:
								url: "/app/userInfo/updatePhone",
								data: {user_id: mag.data.id,phone: phone},
								dataType: "json",
								success: function(res){
									$(".phone").html(phone)
									layer.close(index);
								}
							})
						}else{
							layer.open({
								content: '输入正确的手机号，方便联系',
								skin: 'msg',
								time: 2 //2秒后自动关闭
							});
						}
					}
			
				});
			},
			error: function(){
				layer.open({
					content: '查询失败',
					skin: 'msg',
					time: 2 //2秒后自动关闭
				});
			}
		})
	})

	//选择规格
	$(document).off("click",".index-goods-text3").on("click",".index-goods-text3",function(){
		var id = $(this).parents(".index-goods").attr("cid");
		var _this = this
		$.ajax({
			type: "get",
							//TODO:
			url: "/app/commodityInfo/getDetail/" + id,
			data: '',
			dataType: "json",
			success: function(mag){
				specifications = mag.data.specifications
				var tag = ''
				for (let i = 0; i < specifications.length; i++) {
					tag1 = '<label class="cart-title guige" price="'+ specifications[i].price +'" specifications="'+ specifications[i].specifications +'" style="color: #FF9201"><input type="radio" name="specifications" class="btn_r">￥'+ specifications[i].price +'<i style="color: #A3A3A3">'+ specifications[i].specifications +'</i></label>'
					tag += tag1
				}

				var price_1 = ''
				var specifications_1 = ''
				$(document).off('click','.guige').on('click','.guige',function(){
					price_1 = $(this).attr("price")
					specifications_1 = $(this).attr("specifications")
				})
				layer.open({
					// type: 1,
					title: '规格选择',
					content: tag,
					anim: 'up',
					btn: ['确认', '取消'],
					style: 'position:fixed; bottom:0; left:0; width: 100%; padding:5px 0; border:none;',
					yes:function (index) {
						if (price_1 != '') {
							$(_this).parents(".index-goods").find(".priceJs").html(price_1)
							$(_this).parents(".index-goods").find(".index-goods-text3").html(specifications_1)
						}
						layer.close(index)
						TotalPrice()
					}
				});
			}
		})
	})

	//结算功能
	$("#submit-orders").on("click",function(){
		if (userName == null || userName == '' || userName == undefined) {
			layer.open({
				content: '是否去往登录界面？',
				btn: ['去登陆', '不要'],
				shadeClose: false,
				yes: function(index){
				// window.location = "./login.html";
					var userAgent = navigator.userAgent.toLowerCase();
					if(userAgent.match(/MicroMessenger/i) == "micromessenger") {
						window.location = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx45db0b3d36e1f241&redirect_uri=https%3A%2F%2Fvm.fowotek.com%2Fstatic%2FwebAPP%2Fweichatlogin.html&response_type=code&scope=snsapi_userinfo&#wechat_redirect";
					}else{
						window.location = "/static/webAPP/login.html";
					}
				}
			});
		}else{
			var comment = $("#comment_txt").val()
			var commodities = []
			$(".shop-cart-listbox1").find(".btn2").each(function() {
				if ($(this).is(":checked")) {
					var num = $(this).parents(".index-goods").find(".shop-cart-numer").val();
					var id = $(this).parents(".index-goods").attr("cid");
					var price = $(this).parents(".index-goods").find(".priceJs").html();
					var specification = $(this).parents(".index-goods").find(".index-goods-text3").html();
					
					var commoditie ={"count": num,"id": id,"price": price,"specification": specification}
					commodities.push(commoditie)
				}
			});
				
			$.ajax({
				type: "get",
								//TODO:
				url: "/app/userInfo/" + userName,
				data: '',
				dataType: "json",
				success: function(res){
					var user_id = res.data.id
					var amount = $("#AllTotal").html()
					if (res.data.phone == null ||res.data.phone == '' ||res.data.phone == undefined ) {
						layer.open({
							content: '请先绑定手机号',
							skin: 'msg',
							time: 2 //2秒后自动关闭
						});
					} else {
						if (machine_id == null || machine_id == undefined || machine_id == '') {
							layer.open({
								content: '请选择收货机器',
								skin: 'msg',
								time: 2 //2秒后自动关闭
							});
						}else{
							if (commodities.length == 0) {
								layer.open({
									content: '请选择购买的商品',
									skin: 'msg',
									time: 2 //2秒后自动关闭
								});
							}else{
								$.ajax({
									type: "post",
									//TODO:
									url: "/app/bookOrder/createBookOrder",
									data: {user_id: user_id,machine_id: machine_id,commodities: JSON.stringify(commodities),amount: amount,comment: comment},
									dataType: "json",
									success: function(mag){
										if (mag.success == true) {
											if ($(".btn2").is(':checked')) {
												var check = $(".btn2:checked").parent(".shop-cart-check2").parent(".index-goods")
												for (let i = 0; i < check.length; i++) {
													var cid = check.eq(i).attr('cid')
													var basket = check.eq(i).attr('basket')
													delgoods(basket)
												}
												$(".btn2:checked").parent(".shop-cart-check2").parent(".index-goods").remove();
											}
											$("#comment_txt").val('')
											//TODO:
											
											window.location = "/static/webAPP/PaymentMethod.html?id=" + mag.data.id +"&amount=" + mag.data.amount + "&place=" + machineplace;
											
										}else{
											layer.open({
												content: mag.message,
												skin: 'msg',
												time: 2 //2秒后自动关闭
											});
										}
									}
								})
							}
						}
					}
					
				},
				error: function(){
					layer.open({
						content: '查询失败，请稍后重试',
						skin: 'msg',
						time: 2 //2秒后自动关闭
					});
				}
			})
		}
	})


})
</script>
</body>
</html>